<template>
  <div class="main-bg">
    <payform
      style="z-index: 99"
      v-if="centerDialogVisible"
      @closePayDialog="closeDialog"
      :showCloseButton="true"
      :description="'开通VIP，解锁方案无限制搜索功能'"
    ></payform>

    <div class="drawer" style="display: none">
      <div class="drawer-star">
        <div
          class="drawer-star-item"
          :class="tempThemeId == item.id ? 'active' : ''"
          v-for="item in subList"
          :key="item.id"
          @click="changeTheme(item)"
        >
          <div class="drawer-star-item-left">
            <img class="drawer-star-item-left-img" :src="item.img_url" alt="" />
            <div class="drawer-star-item-left-text">{{ item.name }}</div>
          </div>
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="drawer-star-box" @click="starTheme">
          <el-button class="drawer-star-box-btn">
            <i class="el-icon-plus"></i>
            订阅行业
          </el-button>
        </div>
      </div>
    </div>
    <div class="report" v-show="showTrade == false">
      <div class="fixed-collapse">
        <collapse
          title="浏览方式"
          :list="typeList"
          imgSrc="../wayicon.png"
          v-model="listType"
          @on-select="changeType"
        ></collapse>

        <collapseTheme
          title="行业分类"
          imgSrc="../industryicon.png"
          :list="subList"
          v-model="tempThemeId"
          @on-select="changeTheme"
        ></collapseTheme>
      </div>
      <div style="width: 880px; margin-left: 20px">
        <el-input
          class="report-search"
          style="width: 714px; background: white"
          placeholder="输入关键词搜索想要的方案"
          @keyup.enter.native="searchButton"
          v-model="searchParams.search_key"
        >
          <div slot="append" @click="searchButton" style="cursor: pointer">
            <i class="el-icon-search"></i>
            查一查
          </div>
        </el-input>

        <div
          v-if="tagIndustryStr || tagReportStr || keywordStr"
          class="rp-card flex-ca label_card"
        >
          <div class="flex-11 flex-ca card_wrap">
            <div class="flex-ca label_frame" v-if="tagReportStr.length > 1">
              <span>方案类型：</span
              ><em class="text-ellipsis text-ellipsis-2">{{ tagReportStr }}</em
              ><span
                @click="clearReportType"
                role="img"
                tabindex="-1"
                class="anticon"
                style="
                  color: rgb(255, 255, 255);
                  margin: 0px 4px;
                  width: 12px;
                  height: 12px;
                  font-size: 12px;
                "
                ><svg
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                  focusable="false"
                  class=""
                >
                  <use xlink:href="#icon-close">
                    <svg id="icon-close" viewBox="0 0 1024 1024">
                      <path
                        d="M512 455.099733l237.056-237.056 56.900267 56.900267L568.900267 512l237.056 237.056-56.900267 56.900267L512 568.900267l-237.056 237.056-56.900267-56.900267L455.099733 512 218.043733 274.944l56.900267-56.900267L512 455.099733z"
                      ></path>
                    </svg>
                  </use></svg
              ></span>
            </div>

            <div v-if="tagIndustryStr" class="flex-ca label_frame">
              <span>行业过滤：</span
              ><em class="text-ellipsis">{{ tagIndustryStr }}</em
              ><span
                @click="clearIndustryTags"
                role="img"
                tabindex="-1"
                class="anticon"
                style="
                  color: rgb(255, 255, 255);
                  margin: 0px 4px;
                  width: 12px;
                  height: 12px;
                  font-size: 12px;
                "
                ><svg
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                  focusable="false"
                  class=""
                >
                  <use xlink:href="#icon-close">
                    <svg id="icon-close" viewBox="0 0 1024 1024">
                      <path
                        d="M512 455.099733l237.056-237.056 56.900267 56.900267L568.900267 512l237.056 237.056-56.900267 56.900267L512 568.900267l-237.056 237.056-56.900267-56.900267L455.099733 512 218.043733 274.944l56.900267-56.900267L512 455.099733z"
                      ></path>
                    </svg>
                  </use></svg
              ></span>
            </div>
            <div v-if="keywordStr" class="flex-ca label_frame">
              <span>搜索词：</span
              ><em class="text-ellipsis">{{ keywordStr }}</em
              ><span
                @click="clearKeywordThenSearch"
                role="img"
                tabindex="-1"
                class="anticon"
                style="
                  color: rgb(255, 255, 255);
                  margin: 0px 4px;
                  width: 12px;
                  height: 12px;
                  font-size: 12px;
                "
                ><svg
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                  focusable="false"
                  class=""
                >
                  <use xlink:href="#icon-close">
                    <svg id="icon-close" viewBox="0 0 1024 1024">
                      <path
                        d="M512 455.099733l237.056-237.056 56.900267 56.900267L568.900267 512l237.056 237.056-56.900267 56.900267L512 568.900267l-237.056 237.056-56.900267-56.900267L455.099733 512 218.043733 274.944l56.900267-56.900267L512 455.099733z"
                      ></path>
                    </svg>
                  </use></svg
              ></span>
            </div>
          </div>
          <div class="clear_btn" @click="clearAll">
            <button type="button" class="ant-btn ant-btn-round flex-c round">
              <span
                role="img"
                class="anticon"
                style="
                  color: rgb(38, 118, 211);
                  width: 16px;
                  height: 16px;
                  font-size: 17px;
                "
                ><svg
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                  focusable="false"
                  class=""
                >
                  <use xlink:href="#icon-delete">
                    <svg id="icon-delete" viewBox="0 0 1024 1024">
                      <path
                        d="M204.8 373.76H153.6V296.96h153.6V168.96a51.2 51.2 0 0 1 51.2-51.2h307.2a51.2 51.2 0 0 1 51.2 51.2v128h153.6v76.8h-51.2v486.4a51.2 51.2 0 0 1-51.2 51.2H256a51.2 51.2 0 0 1-51.2-51.2V373.76z m76.8 0v460.8h460.8v-460.8h-460.8z m102.4-76.8h256v-102.4h-256v102.4z m0 179.2H460.8v256H384v-256z m179.2 0h76.8v256H563.2v-256z"
                      ></path>
                    </svg>
                  </use></svg></span
              ><span>清空条件</span>
            </button>
          </div>
        </div>

        <div v-loading="loading" style="position: relative; margin-top: 26px">
          <div class="report-theme" v-if="false">
            <div class="report-theme-list">
              <div
                class="report-theme-list-item"
                v-for="item in searchThemeList"
                :key="item.id"
              >
                <div class="flex justify-content-start align-items-center">
                  <div class="report-theme-list-item-img">
                    <img :src="item.img_url" alt="" />
                  </div>
                  <div class="report-theme-list-item-name">{{ item.name }}</div>
                </div>
                <div
                  class="report-theme-list-item-btn"
                  v-if="item.isSub == 0"
                  @click="toSubOne(item.id, index)"
                >
                  +订阅
                </div>
                <div
                  class="report-theme-list-item-btn-2"
                  v-else
                  @click="toUnSubOne(item.id, index)"
                >
                  取消订阅
                </div>
              </div>
            </div>
          </div>
          <el-empty
            v-if="list == null || list.length == 0"
            style="
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
            :image-size="200"
          ></el-empty>

          <div class="report-list" v-if="listType != 2">
            <!-- 列表式 -->
            <div
              class="report-list-item"
              v-for="(item, index) in list"
              :key="index"
              @click="toDetail(item)"
            >
              <div class="report-list-item-header" style="cursor: pointer">
                <span v-html="item.name"></span>
              </div>
              <div class="report-list-item-info">
                <div
                  class="report-list-item-info-list"
                  v-if="item.item_type == 3"
                >
                  <img
                    class="report-list-item-info-list-new"
                    src="@/assets/images/new.png"
                    v-if="item.is_new == 1"
                    alt=""
                  />
                  <div class="report-list-item-info-list-date">
                    上传于{{ item.timeText }}
                  </div>
                  <div class="report-list-item-info-list-page">
                    <svg
                      t="1641525359137"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2183"
                      width="12"
                      height="12"
                    >
                      <path
                        d="M961.1264 922.592c0 53.0176-42.976 96-96 96H156.5568c-50.496 0-91.4304-40.9344-91.4304-91.4304v-832C65.1264 44.6656 106.0608 3.7312 156.5568 3.7312h708.5696c53.024 0 96 42.9824 96 96v822.8608z m-64-822.8608a32 32 0 0 0-32-32H156.5568a27.4304 27.4304 0 0 0-27.4304 27.4304v832a27.4304 27.4304 0 0 0 27.4304 27.4304h708.5696a32 32 0 0 0 32-32V99.7312z"
                        p-id="2184"
                        fill="#8e969d"
                      ></path>
                      <path
                        d="M723.8016 576.384a3.2 3.2 0 0 1 3.2 3.2v49.0688a3.2 3.2 0 0 1-3.2 3.2h-484.8a3.2 3.2 0 0 1-3.2-3.2V579.584a3.2 3.2 0 0 1 3.2-3.2h484.8z m-158.4-159.68a3.2 3.2 0 0 1 3.2 3.2v49.0624a3.2 3.2 0 0 1-3.2 3.2h-326.4a3.2 3.2 0 0 1-3.2-3.2v-49.0688a3.2 3.2 0 0 1 3.2-3.2h326.4z m166.4-159.6928a3.2 3.2 0 0 1 3.2 3.2v49.0688a3.2 3.2 0 0 1-3.2 3.2h-492.8a3.2 3.2 0 0 1-3.2-3.2v-49.0688a3.2 3.2 0 0 1 3.2-3.2h492.8z"
                        p-id="2185"
                        fill="#8e969d"
                      ></path>
                    </svg>
                    {{ item.page_count }}页
                  </div>
                  <div
                    class="report-list-item-info-list-chat"
                    v-if="item.chart_count"
                  >
                    <svg
                      t="1641526233617"
                      class="icon"
                      viewBox="0 0 1026 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="3230"
                      width="12"
                      height="12"
                    >
                      <path
                        d="M972.067982 946.325604H49.546624V23.804245c0-12.881128-10.913178-23.804245-23.794307-23.804245A23.784367 23.784367 0 0 0 1.948072 23.804245v945.749134c0 13.447659 10.356586 24.360837 23.804245 24.360838h946.315665c13.159424 0 23.804245-10.923117 23.804246-24.360838-0.009939-12.314597-10.644821-23.227775-23.804246-23.227775z m-532.797655-39.478273h176.380017c22.12453 0 39.756569-17.920273 39.756569-39.478272V92.960797c0-21.557999-17.632038-39.199977-39.756569-39.199977H439.270327a39.130403 39.130403 0 0 0-39.190037 39.199977v774.418201c0 21.54806 17.353742 39.468334 39.190037 39.468333z m39.199977-774.129966h97.990003V827.900725H478.470304V132.717365zM136.335213 906.847331h176.668252c21.557999 0 39.478273-17.920273 39.478273-39.478272V594.390519c0-22.12453-17.920273-39.756569-39.478273-39.756569H136.335213c-21.836295 0-39.190038 17.632038-39.190037 39.756569v272.97854c0 21.557999 17.363681 39.478273 39.190037 39.478272z m39.756569-273.256835h97.43341v194.310229h-97.43341V633.590496z m566.113659 273.256835H918.873693c21.557999 0 39.190038-17.920273 39.190038-39.478272V303.779941c0-21.557999-17.632038-39.756569-39.190038-39.756568H742.205441c-21.826356 0-39.756569 18.198569-39.756568 39.756568v563.589118c0 21.557999 17.930212 39.478273 39.756568 39.478272z m39.756569-563.589117h97.155115V827.900725h-97.155115V343.258214z"
                        p-id="3231"
                        fill="#8e969d"
                      ></path>
                    </svg>
                    {{ item.chart_count }}个图表
                  </div>
                  <div
                    class="report-list-item-info-list-chat"
                    v-if="item.stockOrgData && item.stockOrgData.name"
                  >
                    <svg
                      t="1641526547640"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="4556"
                      width="12"
                      height="12"
                    >
                      <path
                        d="M221.12 88.64c9.17-1.68 18.53-1.97 27.83-1.89h298.09c14.63 0.08 29.45-0.65 43.86 2.45 32.84 6.55 62.21 28.22 78.31 57.56 10.99 19.43 15.49 42.04 14.55 64.24h85.21c9.96 0.09 19.98-0.47 29.86 1.09 32.92 4.44 63.29 24 81.25 51.9 11.76 18.07 18.3 39.46 18.66 61.02 0.02 188.58-0.01 377.16 0.02 565.74 11.74-0.02 23.49 0.02 35.24-0.02 8.01-0.17 15.89 4.39 19.86 11.34 4.82 7.95 4.1 18.79-1.62 26.11-4.49 5.91-11.88 9.19-19.24 9.06-280.33 0.03-560.67-0.01-841 0.02-6.24 0.15-12.66-1.67-17.31-5.96-7.21-6.23-9.68-17.1-6.18-25.92 3.17-8.34 11.54-14.46 20.5-14.63 12.08-0.01 24.16 0 36.24 0 0.01-229.92-0.01-459.84 0.01-689.76 0.38-24.69 8.92-49.15 24.01-68.68 17.43-22.79 43.55-38.8 71.85-43.67m-20.4 58.03c-18.15 12.97-29.31 35.03-28.99 57.34 0.04 228.91 0 457.83 0.03 686.74 226.84-0.04 453.67 0.07 680.51-0.05-0.05-185.92 0-371.84-0.02-557.75 0.09-5.85 0.03-11.72-1.05-17.48-2.98-17.84-13.38-34.16-27.99-44.75-12.15-8.78-27.18-13.61-42.19-13.23-38.36 0.03-76.71 0-115.06 0.02-4.43 0.03-8.99 0.2-13.21-1.37-7.27-2.44-13.02-8.78-14.82-16.22-0.86-3.22-0.69-6.57-0.69-9.86 0.02-9.03 0-18.06 0.02-27.09-0.07-15.71-5.65-31.32-15.55-43.52-11.38-14.27-28.59-23.74-46.75-25.66-7.63-0.82-15.32-0.47-22.97-0.54-103.02 0.01-206.04-0.02-309.06 0.01-15.02-0.06-30.07 4.5-42.21 13.41z"
                        p-id="4557"
                        fill="#8e969d"
                      ></path>
                      <path
                        d="M339.25 248.35c33.94-0.21 67.89-0.06 101.83-0.08 16.23-0.05 32.47 5.5 44.96 15.93 15.72 12.7 25.19 32.59 25.44 52.78 0.05 33.67 0 67.34 0.03 101.01 0.04 8.87-1.45 17.77-4.64 26.05-8.21 21.83-28.1 38.78-51 43.28-8.82 1.98-17.89 1.33-26.85 1.43h-89.03c-14.88-0.15-29.68-5.17-41.46-14.27-16.25-12.27-26.68-32.03-27.27-52.42-0.02-34.35 0.01-68.7-0.02-103.05-0.54-18.65 7.11-37.32 20.44-50.35 12.41-12.62 29.9-19.96 47.57-20.31m-3.87 47.19c-9.71 2.28-17.41 11.39-17.63 21.43-0.01 34.35 0 68.71 0 103.07 0.2 9.57 7.16 18.4 16.28 21.14 4.18 1.38 8.64 1.06 12.97 1.07 31.67-0.01 63.34 0.01 95.01 0 12.25 0.03 23.13-10.95 22.97-23.21 0.05-31.68-0.01-63.37 0.03-95.05-0.01-4.07 0.21-8.24-0.95-12.2-2.06-7.33-7.94-13.49-15.21-15.79-4.76-1.58-9.85-1.23-14.79-1.25-30.34 0-60.68 0.01-91.02-0.01-2.57 0.03-5.16 0.19-7.66 0.8zM683.43 425.59c1.82-0.44 3.7-0.58 5.59-0.6 31.34 0.03 62.69-0.01 94.04 0.02 8.67 0.12 16.88 5.73 20.4 13.62 3.45 7.48 2.54 16.77-2.31 23.43-4.27 6.06-11.61 9.91-19.05 9.71-29.03-0.05-58.06-0.01-87.09-0.02-4.76-0.05-9.69 0.49-14.21-1.35-8.21-2.92-14.3-10.76-15.11-19.44-1.53-11.34 6.54-22.94 17.74-25.37zM336.43 562.57c35.19-0.18 70.38-0.01 105.57-0.09 18.2-0.13 36.3 7.43 49.05 20.41 13.07 12.76 20.4 30.94 20.45 49.15v88.03c-0.08 8.6 0.46 17.3-1.19 25.81-2.95 16.48-12.2 31.68-25.35 42.01-12.37 9.76-28.15 15.26-43.93 14.87-31.35-0.03-62.7 0-94.05-0.01-5.31-0.06-10.66 0.27-15.93-0.57-16.5-2.25-32.01-10.73-42.88-23.33-11.18-12.79-17.47-29.85-16.93-46.86 0.03-30.99 0-61.98 0.01-92.97 0.07-5.65-0.32-11.34 0.62-16.94 2.4-17.4 11.84-33.66 25.6-44.53 11.04-8.83 24.85-14.11 38.96-14.98m-0.99 47.04c-9.7 2.29-17.44 11.38-17.69 21.42-0.01 34.31 0.01 68.63-0.01 102.95 0.05 11.71 10.54 22.22 22.25 22.27 34.36-0.01 68.71 0.02 103.06-0.01 11.97-0.31 22.16-11.31 21.94-23.22 0.02-33.35 0-66.7 0.01-100.04 0.25-9.76-6.04-19.37-15.33-22.58-4.34-1.79-9.1-1.4-13.67-1.4-31.67-0.01-63.34 0.01-95.01-0.01-1.87 0.02-3.74 0.16-5.55 0.62zM682.41 565.57c1.82-0.53 3.72-0.8 5.62-0.83 31.67 0.01 63.33 0.01 95 0.01 9.01 0.05 17.49 6.14 20.79 14.46 3.08 7.41 1.94 16.38-2.87 22.8-4.29 5.99-11.59 9.67-18.97 9.5-31.33-0.03-62.67 0.02-94-0.02-11.19-0.1-21.17-9.47-22.26-20.56-1.58-11.05 5.87-22.5 16.69-25.36zM683.48 697.58c1.8-0.44 3.66-0.57 5.52-0.59 31.36 0.03 62.71-0.02 94.07 0.02 11.7 0.07 22.08 10.33 22.44 22 1 12.3-9.2 24.2-21.59 24.71-31.64 0.08-63.28-0.02-94.92 0.05-7.45 0.22-14.82-3.62-19.11-9.68-3.89-5.46-5.31-12.64-3.7-19.16 1.87-8.45 8.85-15.45 17.29-17.35z"
                        p-id="4558"
                        fill="#8e969d"
                      ></path>
                    </svg>
                    {{ item.stockOrgData.name }}
                  </div>
                  <el-tag v-if="item.fileTypeData && item.fileTypeData.name">{{
                    item.fileTypeData && item.fileTypeData.name
                  }}</el-tag>
                  <el-tag
                    style="margin-left: 10px"
                    v-if="
                      item.fileIndustryData && item.fileIndustryData.length > 0
                    "
                    type="success"
                    >{{ item.fileIndustryData[0].name }}</el-tag
                  >
                  <el-tag
                    style="margin-left: 10px"
                    type="warning"
                    v-if="item.stockData && item.stockData.length > 0"
                    >{{ item.stockData[0].name }}</el-tag
                  >
                </div>
                <div
                  class="report-list-item-info-list"
                  v-if="item.item_type == 2"
                >
                  <div class="report-list-item-info-list-read">
                    <img
                      src="@/assets/images/folder-icon.png"
                      class="icon"
                      alt=""
                    />
                    文件夹
                  </div>
                  <div class="report-list-item-info-list-page">
                    {{ item.page_count }}份文档
                  </div>
                  <div class="report-list-item-info-list-date">
                    创建于{{ item.timeText }}
                  </div>
                </div>
              </div>
              <div
                class="report-list-item-img"
                v-show="item.chart_list && item.chart_list.length != 0"
              >
                <div
                  class="report-list-item-img-item"
                  v-for="(chart, chartIndex) in item.chart_list"
                  :key="chartIndex"
                >
                  <img
                    :src="chart.online_url"
                    alt=""
                    @click.stop="lookChat(chart, item, chartIndex)"
                  />
                </div>
              </div>
              <div
                class="report-list-item-content"
                v-show="item.content"
                @click="toDetail(item)"
                v-html="item.content"
              ></div>
            </div>
          </div>
          <div class="report-list" v-if="listType == 2">
            <!-- 预览方式 -->
            <template v-for="item in list">
              <div
                class="report-list-preview"
                :key="item.id"
                @click="toDetail(item)"
              >
                <div class="report-list-preview-img">
                  <img :src="item.share_url" alt="" />
                </div>
                <div
                  class="report-list-preview-text"
                  style="cursor: pointer"
                  v-html="item.name"
                ></div>

                <div class="info">
                  <div>
                    <i class="el-icon-document"></i>
                    {{ item.page_count }}页
                    <i class="el-icon-time"></i>
                    {{ item.timeText }}
                  </div>
                  <div class="vip-free">
                    <img src="@/assets/images/v2/vip.png" alt="" />
                    <div>VIP免费</div>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <div class="report-list-more" v-if="!sid && currentType == 'search'">
            <el-button size="small" class="btn" @click="toVip"
              >登录查看海量方案</el-button
            >
          </div>
          <div
            class="report-list-more"
            v-if="sid && currentType == 'search' && user_type == 1"
          >
            <el-button size="small" class="btn" @click="toPay"
              >付费查看海量方案</el-button
            >
          </div>
          <div class="report-page">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size.sync="currentPageSize"
              :current-page.sync="currentPage"
              :total="listTotal"
              @current-change="pageChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <subscribe-trade
      v-if="showTrade == true"
      @on-close="showTrade = false"
      @on-change="getMySub"
    ></subscribe-trade>
    <look-dataChat
      v-model="lookDataChat"
      :infoImg="infoImg"
      :infoImgList="infoImgList"
      :type="currentType"
      :chatName="chatName"
      :listIndex="listIndex"
      @click.native="zhihuOpenReportPushCode()"
    ></look-dataChat>
    <share v-model="shareModal" :fid="shareFid"></share>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import storage from "@/utils/storage";
import {
  getRcmdReport,
  getHotReportList,
  search,
  getThemeReport,
  getReportByFolder,
  getFileReportTypeList,
  getFileReportTypeTags,
  getMyThemes,
  getCost,
  costTea,
} from "@/api/report.js";
import { getMyGroup } from "@/api/group.js";
import { getIndexList } from "@/api/index.js";
import {
  getMySub,
  getThemes,
  subTheme,
  unSubTheme,
  subThemes,
} from "@/api/theme.js";
import { shareFile } from "@/api/share.js";
import addGroup from "@/components/addGroup.vue";
import payform from "../components/payform.vue";
import share from "@/components/share.vue";
import collapse from "@/components/collapse.vue";
import collapseTheme from "@/components/collapseTheme.vue";
import { Message } from "element-ui";
export default {
  data() {
    return {
      centerDialogVisible: false,
      tagReportStr: "",
      tagIndustryStr: "",
      keywordStr: "", //搜索关键词
      tagIndustryStrFirst: "", //一级行业分类显示字符串
      typeList: [
        {
          id: "2",
          name: "预览式",
        },
        {
          id: "1",
          name: "列表式",
        },
      ],
      timeList: [
        {
          id: 0,
          name: "全部",
        },
        {
          id: 1,
          name: "一个周内",
        },
        {
          id: 2,
          name: "一个月内",
        },
        {
          id: 3,
          name: "半年内",
        },
        {
          id: 4,
          name: "一年内",
        },
      ],
      reportList: [], //搜索出来的方案列表

      timeType: "",
      tempThemeId: "", //一级行业分类查询参数
      shareModal: false,
      shareFid: "",
      currentType: "search",
      currentPage: 1,
      reportTypeArray: [],
      loading: false, //正在加载中，true显示转动的圈
      currentPageSize: 15,
      searchParams: {
        //搜索参数
        device: 1,
        showTrader: 1,
        search_key: "",
        page: 1,
        visitMode: 0,
        pageSize: 15,
        pubdate: 0,
        reportType: 0,
        industryCategory: 0,
        secondaryIndustry: 0,
      },
      themeParams: {
        sid: "",
        page: 1,
        theme_id: "",
        parent_id: "",
      },
      params: {
        sid: "",
        page: 1,
        pageSize: 12,
      },
      dirParams: {
        sid: "",
        page: 1,
        parent_id: "",
      },
      listTotal: 0,
      list: [],
      visible: false,
      groupTotal: 0,
      listType: 2,
      subList: [],

      showTrade: false, //查看券商方案
      lookDataChat: false,
      infoImg: "",
      infoImgList: [],
      chatName: "",
      listIndex: 0, //图片弹出框序号
      searchThemeList: [], //订阅主题
    };
  },
  computed: {
    ...mapGetters(["sid", "token", "user_type"]),
    tradeAgent: {
      get() {
        return this.searchParams.showTrader == 0;
      },
      set(value) {
        if (value) {
          this.searchParams.showTrader = 0;
        } else {
          this.searchParams.showTrader = 1;
        }
        this.searchParams.industryCategory = 0;
        this.searchParams.secondaryIndustry = 0;
        if (this.currentType == "search") {
          this.searchParams.page = 1;
          this.getData();
        }
      },
    },
  },
  components: {
    addGroup,
    share,
    collapse,
    collapseTheme,
    payform,
  },
  created() {
    if (this.$route.query.search_key) {
      this.searchParams.search_key = this.$route.query.search_key;
      this.keywordStr = this.$route.query.search_key;
      this.search();
    } else {
      this.rankReportList(1);
    }
    this.getMySub(); //行业分类

    if (this.sid) {
      this.themeParams.sid = this.sid;
      this.searchParams.sid = this.sid;
      this.params.sid = this.sid;
      this.dirParams.sid = this.sid;
    }
  },
  methods: {
    closeDialog() {
      this.centerDialogVisible = false;
    },
    toSuggest() {
      this.$router.push({
        path: "/suggest",
      });
    },
    // 行业分类选择
    changeTheme(myitem) {
      let item = {
        id: myitem.id,
      };
      // this.searchParams.search_key = "";
      // this.secondList = myitem.items;
      this.searchThemeList = [];
      this.tempThemeId = item.id;
      this.tempThemeIdSecond = "";
      this.searchParams.page = 1;
      this.params.page = 1;

      if (!this.sid) {
        this.$store.commit("SET_SHOW", true);
        return;
      }

      this.themeParams.theme_id = item.id;
      this.tempThemeId = item.id;

      this.themeParams.page = 1;
      this.currentPage = 1;
      // this.listType = 1;
      this.getDataByTheme();
    },

    changeReportType(ids) {
      //      console.log("this.changeReportType-------------------------------");
      //      console.log(ids);
      //  //      console.log(this.reportList);
      //      console.log(this.searchParams);
      //      console.log("this.searchParams");
      this.searchParams.page = 1;
      this.params.page = 1;
      this.reportTypeArray = ids;
      this.searchParams.reportType = ids.toString();
      this.removeRankOrHot();
      this.search();
      var temp = [];
      ids.forEach((obj, idx) => {
        //      console.log(obj, idx);
        //      console.log(this.reportList[obj]);
        this.reportList.forEach((obj1, idx1) => {
          //      console.log(obj1, idx1);
          if (this.reportList[idx1].id == obj) {
            temp.push(this.reportList[idx1].name);
          }
        });
      });
      this.tagReportStr = temp.join("、");
      //      console.log(this.tagReportStr);
    },
    clearReportTypeNoSearch() {
      this.tagReportStr = "";
      this.reportTypeArray = [];
      this.searchParams.reportType = "";
      this.searchParams.page = 1;
      this.params.page = 1;
      // this.removeRankOrHot();
    },
    clearReportType() {
      this.tagReportStr = "";
      this.reportTypeArray = [];
      this.searchParams.reportType = "";
      // this.removeRankOrHot();
      this.searchParams.page = 1;
      this.params.page = 1;
      this.search();
    },
    clearIndustryTags() {
      this.searchParams.industryCategory = 0;
      this.searchParams.secondaryIndustry = 0;
      this.themeParams.theme_id = 0;
      this.tempThemeIdSecond = "";
      this.tempThemeId = 0;
      this.secondList = [];
      this.tagIndustryStrFirst = "";
      this.tagIndustryStr = "";
      this.searchParams.page = 1;
      this.params.page = 1;
      this.search();
    },
    clearIndustryTagsNoSearch() {
      this.searchParams.industryCategory = 0;
      this.searchParams.secondaryIndustry = 0;
      this.themeParams.theme_id = 0;
      this.tempThemeIdSecond = "";
      this.tempThemeId = 0;
      this.secondList = [];
      this.tagIndustryStrFirst = "";
      this.tagIndustryStr = "";
      this.params.page = 1;
      this.searchParams.page = 1;
    },
    clearKeywordThenSearch() {
      this.searchParams.search_key = "";
      this.keywordStr = "";
      this.searchParams.page = 1;
      this.search();
    },
    clearKeyword() {
      this.searchParams.search_key = "";
      this.keywordStr = "";
      this.searchParams.page = 1;
    },
    clearAll() {
      this.searchParams.search_key = "";
      this.keywordStr = "";
      this.searchParams.page = 1;
      this.params.page = 1;
      this.clearReportTypeNoSearch();
      this.clearIndustryTagsNoSearch();
      this.rankReportList(1);
    },
    toLogin() {
      if (!this.sid) {
        this.$store.commit("SET_SHOW", true);
        return;
      }
    },
    // 时间选择
    changeDate(itemid) {
      if (itemid == this.timeType) {
        this.timeType = 0;
        this.searchParams.pubdate = 0;
      } else {
        this.timeType = itemid;
        this.searchParams.pubdate = itemid;
      }
      this.searchParams.page = 1;
      this.params.page = 1;
      this.getData();
      var time;
      if (itemid == 0) {
        time = "全部";
      }
      if (itemid == 1) {
        time = "一个周内";
      }
      if (itemid == 2) {
        time = "一个月内";
      }
      if (itemid == 3) {
        time = "半年内";
      }
      if (itemid == 4) {
        time = "一年内";
      }
    },
    toVip() {
      // if(this.sid){
      //     this.$router.push({
      //         path:'/vip'
      //     })
      // }else{
      this.$store.commit("SET_SHOW", true);
      // }
    },

    searchButton() {
      this.keywordStr = this.searchParams.search_key;
      this.searchParams.searchLimit = 1; //点击按钮搜索
      this.searchParams.page = 1;
      this.removeRankOrHot();
      this.getData();
    },
    removeRankOrHot() {
      //      console.log(this.tempThemeId);
      if (this.tempThemeId == "hot" || this.tempThemeId == "rank") {
        this.tempThemeId = "";
        this.tagIndustryStr = "";
        this.tagIndustryStrFirst = "";
      }
      //      console.log(this.tempThemeId);
      //      console.log(this.searchParams);
    },
    changeType(type) {
      this.listType = type;

      if (this.currentType == "search") {
        this.getData();
      }

      if (this.currentType == "theme") {
        this.getDataByTheme();
      }
    },
    toSubOne(tid, index) {
      if (!this.sid) {
        this.$store.commit("SET_SHOW", true);
        return;
      }
      // if (this.user_type == 1) {
      //   this.$message.warning("请开通会员");
      //   this.$router.push({
      //     path: "/aboutVip",
      //   });
      //   return;
      // }
      subTheme(this.sid, tid).then((res) => {
        this.$message.success("订阅成功");
        this.searchThemeList[index].isSub = 1;
        // this.getMySub();
      });
    },

    toUnSubOne(tid, index) {
      unSubTheme(this.sid, tid).then((res) => {
        this.$message.info("取消成功");
        this.searchThemeList[index].isSub = 0;
        // this.getMySub();
      });
    },

    share(item) {
      this.shareFid = item.fid || item.id;
      this.shareModal = true;
    },

    toPay() {
      this.$router.push({
        path: "/aboutVip",
      });
    },

    // 下方页数变化
    pageChange(page) {
      if (this.currentType == "search") {
        this.search(page);
      } else if (this.currentType == "rank") {
        this.rankReportList(page);
      } else {
        this.getDataByTheme(page);
      }
    },

    starTheme() {
      if (!this.sid) {
        this.$store.commit("SET_SHOW", true);
        return;
      }

      this.showTrade = true;
    },

    search(page) {
      this.searchParams.searchLimit = 0; //点击左侧分类搜索
      this.searchParams.page = page || 1;
      this.getData();
    },

    getData() {
      this.currentType = "search";
      this.searchParams.industryCategory = 0;

      this.loading = true;
      this.list = [];
      this.searchThemeList = []; //订阅主题

      search(this.searchParams)
        .then((res) => {
          this.list = res.data.item_list;
          this.searchThemeList = res.data.themes;
          this.currentPageSize = Number(res.data.page_size);
          if (res.data.total_count) {
            this.listTotal = res.data.total_count;
          }
          this.currentPage = this.searchParams.page;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          //      console.log(err);
          if (this.user_type == 1) {
            this.$message.warning(err.message);
            setTimeout(() => {
              this.$router.push({
                path: "/aboutVip",
              });
            }, 2000);
          }
        });
    },
    rankReportList(page) {
      this.currentType = "rank";

      this.loading = true;
      this.list = [];
      this.rcmdData = {
        page: page,
      };
      getIndexList(this.rcmdData).then((res) => {
        console.log(res);
        this.list = res.data.files;
        this.currentPage = page;
        this.currentPageSize = Number(res.data.page_size);
        this.listTotal =
          res.data.total_count > 750 ? 750 : res.data.total_count;
        this.loading = false;
      });
    },
    getDataByTheme(page) {
      this.clearKeyword();

      this.currentType = "theme";

      this.loading = true;
      this.list = [];
      this.themeParams.page = page || 1;
      getIndexList(this.themeParams).then((res) => {
        console.log(res);
        this.list = res.data.files;
        this.currentPageSize = Number(res.data.page_size);
        this.currentPage = page;
        this.listTotal = res.data.total_count;
        this.loading = false;
      });
    },

    toDetail(item) {
      if (!this.sid) {
        this.toLogin();
        return;
      }
      var fid = item.id;
      getCost(fid).then((res) => {
        console.log("剩余茶叶", res);
        let balance = res.data.balance;
        let need_cost = res.data.need_cost;
        if (need_cost == 0) {
          this.gotoDoc(item);
        } else {
          if (balance >= need_cost) {
            costTea(fid).then((res) => {
              console.log("消费茶叶", res);
              this.gotoDoc(item);
            });
            this.$store.dispatch("GetInfo");
          } else {
            Message({
              message: "您的茶叶余额不足，请充值后查看方案",
              type: "warning",
              duration: 2 * 1000,
            });
          }
        }
      });
    },

    gotoDoc(item) {
      const { Base64 } = require("js-base64");
      let { href } = this.$router.resolve({
        path: "/detail?fid=" + Base64.encode(item.id),
      });
      window.open(href, "_blank");
    },

    //     ----------获取行业分类
    getMySub() {
      this.subList = [];
      //      console.log(" ----------获取行业分类");
      getMyThemes().then((res) => {
        this.subList = res.data.data;
        //      console.log(this.subList);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.info {
  border-top: 1px solid #e9ebee;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #8e969d;
}
.vip-free {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #e89e1d;
  display: flex;
  align-items: center;
  img {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
}
.main-bg {
  width: 100%;
  padding-bottom: 40px;
}
mark {
  color: red;
}
.fixed-collapse {
  width: 350px;
  top: 54px;
  z-index: 98;
  background: #fff;
  border-radius: 2px;
  margin-top: 40px;
}
// ::-webkit-scrollbar {
//   width: 0;
// }
.codetext {
  display: flex;
  padding-left: 10px;
  font-size: 14px;
  flex-direction: column;
  // align-items: center;
  justify-content: center;
  color: #409eff;
}
.drawer {
  position: fixed;
  left: 0;
  top: 54px;
  height: calc(100% - 54px);
  background: #fff;
  width: 264px;
  z-index: 99;
  &-customer {
    padding: 28px 16px 20px;
    &-header {
      font-size: 16px;
      color: #3f4750;
      margin-bottom: 12px;
    }
  }
  &-date {
    padding: 0 16px 20px;
    &-header {
      font-size: 16px;
      color: #3f4750;
    }
    &-box {
      margin-top: 12px;
    }
  }
  &-star {
    border-top: 8px solid #f3f5f7;
    height: calc(100% - 131.85px);
    overflow: auto;
    &-item {
      height: 80px;
      padding: 16px;
      border-bottom: 1px solid #e9ebee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        &-img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          flex: none;
          margin-right: 12px;
        }
        &-text {
          font-size: 16px;
          color: #3f4750;
        }
      }
    }
    .active {
      background: #467dd0;
      color: #fff;
      .drawer-star-item-left-text {
        color: #fff;
      }
    }
    &-box {
      padding: 20px 16px;
      &-btn {
        width: 100%;
        background: #467dd0;
        font-size: 14px;
        color: #fff;
      }
    }
  }
}
.report {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 500px;
  &-search {
    margin: 40px 0;
    /deep/ .el-input-group__append {
      background: #467dd0;
      color: #fff;
      width: 96px;
    }
  }
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    &-title {
      font-size: 16px;
      color: #3f4750;
      cursor: pointer;
      // font-weight: bold;
    }
    &-tag {
      &-item {
        margin-left: 8px;
      }
    }
  }
  &-list {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    padding-bottom: 20px;
    &-item {
      padding: 16px 20px 16px;
      width: 100%;
      background: #fff;
      border-radius: 2px;
      border: 1px solid rgba(233, 235, 238, 1);
      margin-bottom: 12px;
      cursor: pointer;
      &-header {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 16px;
        line-height: 22px;
        &-icon {
          width: 16px;
          height: 16px;
          display: block;
          margin-top: 4px;
          margin-right: 6px;
        }
      }
      &-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        &-list {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 14px;
          color: #8e969d;
          &-new {
            height: 24px;
            display: block;
            margin-right: 5px;
            width: 24px;
          }
          &-read,
          &-date,
          &-page,
          &-chat {
            margin-right: 20px;
          }
          &-read {
            display: flex;
            justify-content: center;
            align-items: center;
            .icon {
              width: 16px;
              height: 16px;
              display: block;
              margin-right: 3px;
            }
          }
        }
        &-action {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          &-item {
            width: 24px;
            height: 24px;
            display: block;
            margin-left: 16px;
          }
        }
      }
      &-img {
        margin-top: 19px;
        display: flex;
        justify-items: flex-start;
        align-items: center;
        &-item {
          width: 163px;
          height: 163px;
          display: block;
          margin-left: 12px;
          border-radius: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          &:first-child {
            margin-left: 0;
          }
          img {
            max-width: 100%;
            max-height: 100%;
            display: block;
          }
        }
      }
      &-content {
        padding: 12px 8px;
        background: #f3f5f7;
        border-radius: 8px;
        margin-top: 12px;
        font-size: 12px;
        color: #3f4750;
        cursor: pointer;
        word-break: break-all;
        max-height: 150px;
        line-height: 22px;
        text-overflow: ellipsis;
        -webkit-line-clamp: 6;
        overflow: hidden;
      }
    }
    &-preview {
      width: 280px;
      margin-left: 16px;
      margin-bottom: 12px;
      cursor: pointer;
      &:nth-child(3n - 2) {
        margin-left: 0;
      }
      background: #fff;
      border-radius: 6px;
      border: 1px solid rgba(233, 235, 238, 1);
      &-img {
        width: 100%;
        height: 180px;
        max-width: 280px;
        max-height: 180px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        img {
          width: 280px;
          height: 180px;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px;
          object-fit: cover;
          max-width: 280px;
          max-height: 180px;
        }
      }
      &-text {
        width: 240px;
        text-align: justify;
        margin: 15px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #3f4750;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      &-action {
        padding: 0 16px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-left {
          font-size: 14px;
          color: #8e969d;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          &-new {
            height: 24px;
            display: block;
            margin-right: 5px;
            width: 24px;
          }
        }
        &-right {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          &-item {
            width: 24px;
            height: 24px;
            display: block;
            margin-left: 16px;
            background: red;
          }
        }
      }
      &-folder {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: wrap;
        &-item {
          padding: 16px 20px 16px;
          width: 100%;
          background: #fff;
          border-radius: 2px;
          border: 1px solid rgba(233, 235, 238, 1);
          margin-top: 12px;
          &-header {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            font-size: 16px;
            line-height: 22px;
            &-icon {
              width: 16px;
              height: 16px;
              display: block;
              margin-top: 4px;
              margin-right: 6px;
            }
          }
          &-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            &-list {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              font-size: 14px;
              color: #8e969d;
              &-new {
                height: 24px;
                display: block;
                margin-right: 5px;
                width: 24px;
              }
              &-read,
              &-date,
              &-page,
              &-chat {
                margin-right: 20px;
              }
              &-read {
                display: flex;
                justify-content: center;
                align-items: center;
                .icon {
                  width: 16px;
                  height: 16px;
                  display: block;
                  margin-right: 3px;
                }
              }
            }
            &-action {
              display: flex;
              justify-content: flex-end;
              align-items: center;
              &-item {
                width: 24px;
                height: 24px;
                display: block;
                margin-left: 16px;
              }
            }
          }
          &-img {
            margin-top: 19px;
            display: flex;
            justify-items: flex-start;
            align-items: center;
            &-item {
              width: 163px;
              height: 163px;
              display: block;
              margin-left: 12px;
              border-radius: 2px;
              display: flex;
              justify-content: center;
              align-items: center;
              &:first-child {
                margin-left: 0;
              }
              img {
                max-width: 100%;
                max-height: 100%;
                display: block;
              }
            }
          }
        }
      }
    }

    &-more {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 60px;
      .btn {
        width: 100%;
        background: #467dd0;
        color: #fff;
        font-size: 16px;
      }
    }
  }
  &-page {
    padding: 15px 0;
    text-align: center;
  }
  &-theme {
    &-header {
      font-size: 16px;
      color: #eee;
    }
    &-list {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      &-item {
        &:nth-child(2n - 1) {
          margin-right: 20px;
        }
        width: 350px;
        height: 80px;
        background-color: #ffffff;
        padding: 0 16px;
        margin-top: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          margin-right: 12px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        &-name {
          font-size: 16px;
          font-weight: 600;
          color: #3f4750;
        }
        &-btn {
          width: 64px;
          height: 32px;
          border-radius: 2px;
          border: 1px solid rgba(70, 125, 208, 1);
          font-size: 14px;
          color: #467dd0;
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          &-2 {
            width: 80px;
            height: 32px;
            border-radius: 2px;
            border: 1px solid red;
            font-size: 14px;
            color: red;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.el-tag {
  border-width: 1px;
  border-style: solid;
  border-radius: 15px 15px 15px 0;
}

.flex-ca {
  display: flex;
  align-items: center;
}

.flex-cj {
  display: flex;
  justify-content: center;
}

.flex-11 {
  flex: 1 1 auto;
}
.label_card {
  line-height: 30px;
  margin-bottom: 10px;
  padding: 10px 10px 0 20px;
}

.label_card {
  line-height: 30px;
  margin-bottom: 10px;
  padding: 10px 10px 0 20px;
}

.label_card > * > * {
  margin: 0 10px 10px 0;
}

.card_wrap {
  flex-wrap: wrap;
}

.label_frame {
  height: 30px;
  line-height: 30px;
  border-radius: 1px;
  padding: 0 4px 0 10px;
  background-color: #eaf3fd;
  border: 1px solid #2676d3;
}

.label_frame > span:first-child {
  color: #666;
  flex: 0 0 auto;
}

.label_frame > em {
  max-width: 620px;
  color: #37c3bd;
}

.label_frame > span:last-child {
  padding: 2px;
  border-radius: 50%;
  transform: scale(0.8);
  box-sizing: content-box;
  background-color: #2676d3;
}

.label_frame > span:last-child:hover {
  opacity: 0.8;
}

.clear_btn button {
  font-size: 12px;
}

.clear_btn button > span {
  margin-left: 0 !important;
}
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-style: normal;
}

.text-ellipsis-2 {
  -webkit-line-clamp: 2;
}

.text-ellipsis-2,
.text-ellipsis-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.text-ellipsis-3 {
  -webkit-line-clamp: 3;
}

.anticon {
  display: inline-block;
  color: inherit;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.anticon > * {
  line-height: 1;
}

.anticon svg {
  display: inline-block;
}

.anticon:before {
  display: none;
}

.anticon .anticon-icon {
  display: block;
}

.anticon[tabindex] {
  cursor: pointer;
}

.anticon-spin,
.anticon-spin:before {
  display: inline-block;
  animation: loadingCircle 1s linear infinite;
}

.ant-fade-appear,
.ant-fade-enter,
.ant-fade-leave {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.ant-fade-appear.ant-fade-appear-active,
.ant-fade-enter.ant-fade-enter-active {
  animation-name: antFadeIn;
  animation-play-state: running;
}

.ant-fade-leave.ant-fade-leave-active {
  animation-name: antFadeOut;
  animation-play-state: running;
  pointer-events: none;
}

.ant-fade-appear,
.ant-fade-enter {
  opacity: 0;
  animation-timing-function: linear;
}

.ant-fade-leave {
  animation-timing-function: linear;
}

.rp-card {
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(39, 66, 107, 0.1);
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-variant: tabular-nums;
  background-color: #fff;
  font-feature-settings: "tnum";
}
.label_card {
  line-height: 30px;
  margin-bottom: 10px;
  padding: 10px 10px 0 20px;
}

.label_card > * > * {
  margin: 0 10px 10px 0;
}

.clear_btn button {
  font-size: 12px;
}

.clear_btn button > span {
  margin-left: 0 !important;
}

.ant-btn {
  line-height: 1.5715;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  user-select: none;
  touch-action: manipulation;
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 2px;
  color: rgba(0, 0, 0, 0.85);
  border: 1px solid #d9d9d9;
  background: #fff;
}

.ant-btn > .anticon {
  line-height: 1;
}

.ant-btn,
.ant-btn:active,
.ant-btn:focus {
  outline: 0;
}
.ant-btn-round {
  height: 32px;
  padding: 4px 16px;
  font-size: 14px;
  border-radius: 32px;
}
</style>
